<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" label-suffix="：" class="demo-form-inline" label-position="right">
      <el-form-item label="商品规格名称">
        <el-input v-model="formInline.name" placeholder="商品规格名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getList">查询</el-button>
        <el-button size="small" @click="Reset">重置</el-button>
        <el-button type="primary" size="small" @click="OpenHandle('1')">添加商品规格</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      :header-cell-style="{
        textAlign: 'center',
        color: '#909399',
        backgroundColor: '#f8f8f8',
      }"
    >
      <el-table-column label="ID" prop="specification_id" align="center" />
      <el-table-column label="商品规格名称" prop="specification_name" align="center" />
      <el-table-column label="商品规格值" prop="specification_value" align="center">
        <template #default="{ row }">
          <el-tag v-for="(item, index) in row.specification_value" :key="index" type="warning" size="medium">
            {{ deleteSymbol(item) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="handle" align="center">
        <template #default="{ row }">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="OpenHandle('2', row)">修改</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="remove(row.specification_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="formInline.total > 0"
      :total="formInline.total"
      :page.sync="formInline.page"
      :limit.sync="formInline.limit"
      @pagination="getList"
    />
    <!-- 操作 -->
    <handle ref="handle" @getList="getList"></handle>
  </div>
</template>

<script>
  import handle from './components/handle.vue'
  import Pagination from '@/components/Pagination'
  import { get_goods_specification, delete_specification_list } from '@/api/goods'
  export default {
    components: { Pagination, handle },
    data() {
      return {
        listLoading: false,
        formInline: {
          total: 10,
          page: 1,
          limit: 10,
          name: '',
        },
        tableData: [],
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      async getList() {
        this.listLoading = true
        await get_goods_specification(this.formInline).then(({ data }) => {
          this.tableData = data.list
          this.formInline.total = data.total
          this.tableData.forEach((item) => {
            item.specification_value = item.specification_value.split(',')
          })
          console.log('this.tableData: ', this.tableData)
        })
        this.listLoading = false
      },
      deleteSymbol(val) {
        if (!val.includes('|')) return val
        return val.replace(/\|/g, '￥')
      },
      Reset() {
        this.formInline = {
          total: 10,
          page: 1,
          limit: 10,
        }
        this.getList()
      },
      OpenHandle(type, row) {
        this.$refs.handle.open(type, row)
      },
      add() {},
      edit() {},
      remove(specification_id) {
        this.$confirm('确认要删除该商品规格?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          await delete_specification_list({ specification_id }).then((data) => {
            console.log('data: ', data)
            if (data.code == 200) {
              this.$message.success('删除成功')
              this.getList()
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
    },
  }
</script>

<style></style>
